---
title: Loading
description: "`Loading`は、データの読み込み中などの待機時間に表示するコンポーネントです。"
storybook: components-loading--basic
source: components/loading
style: components/loading/loading.style.ts
---

```tsx preview
<Loading.Oval fontSize="3xl" />
```

## 使い方

:::code-group

```tsx [package]
import { Loading } from "@yamada-ui/react"
```

```tsx [alias]
import { Loading } from "@/components/ui"
```

```tsx [monorepo]
import { Loading } from "@workspaces/ui"
```

:::

```tsx
<Loading.Oval />
<Loading.Grid />
<Loading.Audio />
<Loading.Dots />
<Loading.Puff />
<Loading.Rings />
<Loading.Circles />
```

### バリアントを変更する

```tsx preview
<Wrap gap="md">
  <Loading.Oval color="red.500" fontSize="3xl" />
  <Loading.Grid color="orange.500" fontSize="3xl" />
  <Loading.Audio color="yellow.500" fontSize="3xl" />
  <Loading.Dots color="green.500" fontSize="3xl" />
  <Loading.Puff color="teal.500" fontSize="3xl" />
  <Loading.Rings color="blue.500" fontSize="3xl" />
  <Loading.Circles color="cyan.500" fontSize="3xl" />
</Wrap>
```

### サイズを変更する

```tsx preview
<Wrap gap="md">
  <Loading.Oval color="red.500" fontSize="lg" />
  <Loading.Grid color="orange.500" fontSize="xl" />
  <Loading.Audio color="yellow.500" fontSize="2xl" />
  <Loading.Dots color="green.500" fontSize="3xl" />
  <Loading.Puff color="teal.500" fontSize="4xl" />
  <Loading.Rings color="blue.500" fontSize="5xl" />
  <Loading.Circles color="cyan.500" fontSize="6xl" />
</Wrap>
```

## Props

<PropsTable name="loading" />
